<li
    class="contactViewItem-container"
    data-field="{{::info.key}}">

    <i class="fa fa-phone contactViewDetail-icon" aria-hidden="true"></i>
    <i class="fa fa-envelope contactViewDetail-icon" aria-hidden="true"></i>
    <i class="fa fa-user contactViewDetail-icon" aria-hidden="true"></i>
    <i class="fa fa-home contactViewDetail-icon" aria-hidden="true"></i>
    <i class="fa fa-address-card contactViewDetail-icon" aria-hidden="true"></i>
    <i class="fa fa-sticky-note contactViewDetail-icon" aria-hidden="true"></i>
    <i class="fa fa-photo contactViewDetail-icon" aria-hidden="true"></i>
    <i class="fa fa-birthday-cake contactViewDetail-icon" aria-hidden="true"></i>
    <i class="fa fa-anchor contactViewDetail-icon" aria-hidden="true"></i>
    <i class="fa fa-genderless contactViewDetail-icon" aria-hidden="true"></i>
    <i class="fa fa-user-o contactViewDetail-icon" aria-hidden="true"></i>
    <i class="fa fa-user-circle-o contactViewDetail-icon" aria-hidden="true"></i>
    <i class="fa fa-tag contactViewDetail-icon" aria-hidden="true"></i>

    <span class="contactViewDetail-type">{{ ::info.key | contactViewType:info.type }}</span>

    <div
        ng-if="info.key === 'email'"
        class="contactViewItem-value-email">
        <a
            href="mailto:{{info.value}}"
            pt-tooltip-translate="Compose a new message to this email"
            pt-tooltip-translate-context="Tooltip"
            class="contactViewItem-label-email">{{::info.value}}</a>
        <contact-groups-overview
            data-contact="contact"
            data-email="info"
            class="contactViewItem-label-group"></contact-groups-overview>
    </div>

    <a
        ng-if="info.key === 'tel'"
        href="tel:{{info.value}}"
        class="contactViewItem-value-tel">{{::info.value}}</a>

    <a
        ng-if="info.key === 'url'"
        rel="noreferrer nofollow noopener"
        href="{{::info.value | formatURL}}"
        target="_blank"
        class="contactViewItem-value-url">{{::info.value | formatURL}}</a>

    <span ng-if="info.key === 'bday'" class="contactViewItem-value-bday">{{ ::info.value | formatBDay }}</span>

    <span
        ng-if="info.key !== 'adr' && info.key !== 'email' && info.key !== 'tel' && info.key !== 'photo' && info.key !== 'url' && info.key !== 'bday'"
        class="contactViewItem-value-txt">{{::info.value}}</span>

    <div
        ng-if="info.key === 'photo'"
        class="contactViewItem-value-figure">
        <div class="contactViewItem-value-figureMask">
            <button
                class="pm_button contactViewItem-value-figureBtn"
                data-action="loadRemoteImage"
                type="button"
                translate-context="Action"
                translate>Load image</button>
        </div>
        <img
            class="contactViewItem-value-img"
            ng-if="loadImage"
            ng-src="{{::info.value}}"
            referrerPolicy="no-referrer"
            alt="avatar">
    </div>

    <address
        ng-if="info.key === 'adr'"
        class="contactViewItem-value-adr">
        <ul class="contactViewItem-list">
            <li
                class="contactViewItem-item"
                ng-repeat="detail in ::formatAddress(info.value) track by $index">{{::detail}}</li>
        </ul>
    </address>

    <div class="contactViewItem-actions">
        <contact-groups-dropdown
            data-position="left"
            data-type="email"
            data-contact="contact"
            data-model="info"
            class="contactViewItem-actions-dropdownGroup"
            ng-if="type === 'email'"></contact-groups-dropdown>

        <advanced-settings-btn
            class="contactItem-btn-settings"
            ng-if="info.key === 'email' && !isOwnAddress(info.value)"
            data-contact="contact"
            data-mode="mode"
            data-model="info"></advanced-settings-btn>
    </div>
</li>
